<template>

    <img :src="setupData.componentContent || mockData" alt="" srcset="" :style="stylesConfig" @dragstart.prevent class="compo-public-style" />
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
    value: {
        type: Object,
        default: () => {}
    },
    preview: {
        type: Boolean,
        default: () => false
    }
});
const mockData = 'https://p.qqan.com/up/2022-12/16709987918137922.jpg';

const stylesConfig = computed(() => {
    return {
        width: `${props.value.styles?.w / 100}rem`,
        height: `${props.value.styles?.h / 100}rem`,
        position: props.preview ? 'absolute' : 'static',
        left: `${props.value.styles?.x}px`,
        top: `${props.value.styles?.y}px`,
        // background: 'red'
    };
});
const setupData = computed(() => {
    return {
        ...props.value.setups
    };
});
// const initData = computed(() => {
//     return {
//         ...props.value.data
//     };
// });
</script>
<style scoped lang="scss"></style>
